<template>
	<view>
		<view class="container">
			<view class="select1">
				<uni-data-select
						v-model="selectedValue"
						:localdata="selectData"
						@change="change">
				</uni-data-select>
			</view>
		</view>
	<view v-if="selectedValue==0">
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">00000000000年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
	</view>

	<view v-if="selectedValue==1">
		<view class="card1">
		<uni-row>
			<uni-col :span="3">
				<image src="../../static/dengji.png" class="photo"></image>
			</uni-col>
			<uni-col :span="21">
				<view class="zik"></view>
				<text class="zi">1111111111年春节放假</text>
			</uni-col>
		</uni-row>
		<view class="zi2k">
			<text class="zi2">
				假期开始时间：2023-11-16 00:00:00\n
				假期结束时间：2023-11-16 00:00:00\n
				时长：26天
			</text>
		</view>
	</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">1111111111年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">1111111111年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">1111111111年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
		<view class="card1">
			<uni-row>
				<uni-col :span="3">
					<image src="../../static/dengji.png" class="photo"></image>
				</uni-col>
				<uni-col :span="21">
					<view class="zik"></view>
					<text class="zi">1111111111年春节放假</text>
				</uni-col>
			</uni-row>
			<view class="zi2k">
				<text class="zi2">
					假期开始时间：2023-11-16 00:00:00\n
					假期结束时间：2023-11-16 00:00:00\n
					时长：26天
				</text>
			</view>
		</view>
	</view>

	<view v-if="selectedValue==2">
	<view class="card1">
		<uni-row>
			<uni-col :span="3">
				<image src="../../static/dengji.png" class="photo"></image>
			</uni-col>
			<uni-col :span="21">
				<view class="zik"></view>
				<text class="zi">2222222222年春节放假</text>
			</uni-col>
		</uni-row>
		<view class="zi2k">
			<text class="zi2">
				假期开始时间：2023-11-16 00:00:00\n
				假期结束时间：2023-11-16 00:00:00\n
				时长：26天
			</text>
		</view>
	</view>
</view>

	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
	import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
  import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";

	const selectedValue = ref('0'); // 设置默认选项为 '0'

	const selectData = [{
			value: '0',
			text: '近一个月'
		},
		{
			value: '1',
			text: '近半年'
		},
		{
			value: '2',
			text: '近一年'
		},
	];
const change=function (){
	console.log(selectedValue._value)
}
</script>

<style scoped>
	.select1 {
		width: 100px;
		height: 30px;
		background: #FFFFFF;
		border-radius: 15px;
		margin-top: 12px;
		margin-right: 20px;
      display: flex;
      flex-direction: row-reverse;
	}

	.card1 {
		width: 92%;
		height: 124px;
		background-image: linear-gradient(180deg, #E9F1FF 0%, #FFFFFF 100%);
		box-shadow: 0 2px 5px 0 #E2E4EB;
		border-radius: 10px;
		background-image: url("../../static/bg.png");
		margin-left: 20px;
		margin-top: 20px;
	}

	.photo {
		width: 22px;
		height: 22px;
		margin-left: 20px;
		margin-top: 14px;
	}

	.zi {
		width: 119px;
		height: 22px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 16px;
		color: #212121;
	}

	.zik {
		margin-left: 10px;
		margin-top: 14px;
	}

	.zi2 {
		width: 203px;
		height: 66px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5D5E5D;
		line-height: 22px;
	}

	.zi2k {
		margin-left: 20px;
		margin-top: 6px;
	}

	.container {
		display: flex;
		flex-direction: row-reverse;
	}
</style>